<template>
	<!-- <top_bg>
	</top_bg> -->

	<one_cart_item class="one_cart_item">
		<template v-slot:one_cart_item_img class="cart_item_img">
			<!-- <img src="../assets/cart_item_img.png" class="cart_item_img" /> -->
			<slot name="order_one_cart_item_img"></slot>
		</template>

		<!-- <div class="right">
			<div class="p1 flex">
				<div> -->
					<template v-slot:one_cart_item_desc>
						<slot name="order_one_cart_item_desc"></slot>
						<!-- <div class="cart_item_desc">
					<p>HUAWEI MateBook 16 </p>
					<p>idealzbasics credit </p>
				</div> -->
					</template>
				<!-- </div> -->
				<template v-slot:one_cart_item_right_del>
					<slot name="order_one_cart_item_right_del"></slot>
				</template>
				<!-- <img style="height: 1.5rem;" :src="require('../assets/delete.png')" @click="delItem(index)" /> -->
			<!-- </div> -->
			<template v-slot:one_cart_item_price>
				<!-- 	<div class="cart_item_price">
					<p>AED30.00</p>
				</div> -->
				<slot name="order_one_cart_item_price"></slot>
			</template>

			<template v-slot:one_cart_item_right>
				<slot name="order_one_cart_item_right"></slot>
			</template>


			<!-- <template v-slot:one_cart_item_right>
				<div class="cart_item_right">
					<p class="reduce" @click="reduce">-</p>
					<van-field class="input_text" v-model="realValue" placeholder="1" />
					<p class="plus" @click="plus">+</p>
				</div>
			</template> -->
		<!-- </div> -->

	</one_cart_item>

	<!-- <div class="mid">
	<p class="title1">Popular campaigns to add:</p>
	<prize_area_item imgName="purchase_prize_goods1.png" @click="addToCart">
	</prize_area_item>
	</div> -->


</template>

<script>
	// import draws_cart_item from "@/components/draws_cart_item"
	import one_cart_item from "@/components/one_cart_item"
	import prize_area_item from "@/components/prize_area_item"

	export default {
		data() {
			return {
				title: "",
				realValue: 0,
			}
		},
		methods: {
			addToCart() {
				console.log("xxxxxxxxxxx")
			},
			goPrePage() {
				this.$router.back()
			},
			plus() {
				console.log("---plus---")
				if (this.realValue >= 100) {
					return;
				}
				this.realValue++
			},
			reduce() {
				console.log("---reduce---")

				if (this.realValue <= 0) {
					return;
				}
				this.realValue--
			},
		}
	}
</script>

<style scoped>
	.one_cart_item {
		/* position: relative; */
		margin-top: 0.5rem;
		width: calc(100% - 0.9rem);
		/* 		width: 25rem; */
		height: 9.5rem;
		margin-left: 0.3rem;
		margin-right: 0.3rem;
		/* border: 0.1; */
		border-radius: 20px;
		/* border-style: dashed; */
		/* background-color: white; */

		/* border-radius: 20px;
		width: 100vw;
		height:300px;
		border:solid 1px red;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20px;
		box-sizing: border-box; */
	}

	.cart_item_img {
		margin-top: 0.2rem;
		/* width: 8rem; */
		height: 8rem;
		border: 0.1;
		border-radius: 20px;
		border-style: dashed;
	}

	.right {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 20px;
		font-family: 'PingFang SC';
		font-size: 1rem;
		padding: 10px;
		box-sizing: border-box;
	}

	.cart_item_desc {
		position: relative;
		font-size: 0.8rem;
		left: 9rem;
		top: -8rem;
		/* width: 12rem; */
		font-family: 'PingFang SC';
		font-weight: bold;
	}

	.cart_item_price {
		position: relative;
		font-size: 0.8rem;
		left: 9rem;
		top: -6rem;
		/* width: 12rem; */
		font-family: 'PingFang SC';
		/* font-weight: bold; */
		color: #EC4228;
	}

	.cart_item_right {
		position: relative;
		font-size: 0.8rem;
		left: 14rem;
		top: -10rem;
		/* width: 12rem; */
		font-family: 'PingFang SC';
		/* font-weight: bold; */
		color: #EC4228;
	}

	.reduce {
		position: relative;
		font-size: 1rem;
		top: 1.5rem;
	}

	.input_text {
		position: relative;
		font-size: 1rem;
		top: -1rem;
		left: 1.5rem;
		width: 4rem;
	}

	.plus {
		position: relative;
		font-size: 1rem;
		top: -3.7rem;
		left: 6rem;
	}
</style>